<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FLOWABLE</title>
    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<style>
    img:hover{
        transform: scale(20);
    }
</style>
<body>

<div style="width: 100%;height: 300px;" >
    <table border="1" style="float: left">
        <tr> <td colspan="2">部署流程</td></tr>
        <tr> <td>模型名称:</td><td><input id="name" type="text"/></td></tr>
        <tr> <td>模型key:</td> <td><input id="key" type="text"/></td>  </tr>
        <tr> <td>描述:</td> <td><input id="description" type="text"/></td> </tr>
        <tr> <td colspan="2"> <button onclick="add()">创建流程图</button> </td></tr>
    </table>

    <table border="1" style="float: left">
        <tr> <td colspan="2"> 提交申请（发起一个审批）</td> </tr>
        <tr> <td>processDefinitionId:</td> <td><input id="processDefinitionId" type="text"/></td> </tr>
        <tr> <td>processDefinitionKey:</td> <td><input id="processDefinitionKey" type="text"/></td> </tr>
        <tr> <td>businessKey:</td> <td><input id="businessKey" type="text"/></td> </tr>
        <tr> <td>businessType:</td> <td><input id="businessType" type="text"/></td> </tr>
        <tr> <td>businessName:</td> <td><input id="businessName" type="text"/></td> </tr>
        <tr> <td colspan="2"><button onclick="approve()">提交申请</button></td> </tr>
    </table>


    <table border="1" style="float: left">
        <tr> <td colspan="2"> 查询</td> </tr>
        <tr> <td>businessKey:</td> <td><input id="businessKey1" type="text"/></td> </tr>
        <tr> <td>name:</td> <td><input id="name1" type="text"/></td> </tr>
        <tr> <td colspan="2"><button onclick="page()">提交查询</button></td> </tr>
    </table>

    <table border="1" style="float: left">
        <tr> <td colspan="2"> 查询待办</td> </tr>
        <tr> <td>group:</td> <td><input id="group" type="text" value="[]"/></td> </tr>
        <tr> <td>userId:</td> <td><input id="userId" type="text"/></td> </tr>
        <tr> <td colspan="2"><button onclick="taskQuery()">提交查询</button></td> </tr>
    </table>
    <table border="1" style="float: left">
        <tr> <td colspan="2"> 查询已办理</td> </tr>
        <tr> <td>userId:</td> <td><input id="userId1" type="text"/></td> </tr>
        <tr> <td colspan="2"><button onclick="hisQuery()">提交查询</button></td> </tr>
    </table>
</div>

<div style="float: left">
    <table border="1">
        <h4>模型</h4>
        <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>KEY</th>
                <th>DESCRIPTION</th>
                <th>CREATEDBY</th>
                <th>LASTUPDATED</th>
                <th>编辑</th>
                <th>删除</th>
                <th>发布</th>
                <th>下载</th>
            </tr>
        </thead>
        <tbody id="tab"></tbody>
    </table>

    <table border="1">
        <h4>正在执行的流程</h4>
        <thead>
        <tr>
            <th>processInstanceId</th>
            <th>流程图</th>
            <th>流程名称</th>
            <th>业务ID</th>
            <th>开始时间</th>
            <th>发起人</th>
            <th>processDefinitionId</th>
            <th>processDefinitionKey</th>
            <th>processDefinitionName</th>
            <th>流程是否结束</th>
            <th>isSuspended</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="runId"></tbody>
    </table>

    <table border="1">
        <h4>我的待办</h4>
        <thead>
        <tr>
            <th>TaskID</th>
            <th>processInstanceId</th>
            <th>待办ID</th>
            <th>待办Name</th>
            <th>businessKey</th>
            <th>businessName</th>
            <th>processDefinitionId</th>
            <th>processDefinitionKey</th>
            <th>processDefinitionKey</th>
            <th>参数variables</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="taskId"></tbody>
    </table>

    <table border="1">
        <h4>我的已办</h4>
        <thead>
        <tr>
            <th>ID</th>
            <th>businessKey</th>
            <th>businessName</th>
            <th>processDefinitionKey</th>
            <th>processDefinitionName</th>
            <th>Name</th>
            <th>流程变量</th>
            <th>executionId</th>
            <th>processInstanceId</th>
            <th>processDefinitionId</th>
            <th>taskDefinitionId</th>
            <th>签收人或被委托</th>
            <th>实际签收人/任务的拥有者</th>
            <th>创建时间</th>
            <th>结束时间</th>
            <th>耗时(毫秒)</th>
        </tr>
        </thead>
        <tbody id="hisId"></tbody>
    </table>

</div>


<script>
    // 获取服务器的： http://xxxx
    var protocol_ip_post = window.location.protocol+"//"+window.location.host;

    $.ajax({
        type: "GET",
        // url: protocol_ip_post + "/app/rest/models?filter=processes&modelType=0&sort=modifiedDesc",
        url: protocol_ip_post + "/models/rest/models?modelType=0&sort=modifiedDesc",
        dataType: "json", //预期服务器返回数据的类型
        success: function (data) {
            console.log("data:", data);
            var html = "";
            var dd = data.result;
            for (var i in dd) {
                html += "<tr>";
                html += "<td>" + dd[i].id + "</td>";
                html += "<td>" + dd[i].name + "</td>";
                html += "<td>" + dd[i].key + "</td>";
                html += "<td>" + dd[i].description + "</td>";
                html += "<td>" + dd[i].createdBy + "</td>";
                html += "<td>" + dd[i].lastUpdated + "</td>";
                html += "<td>" + "<a href='"+ protocol_ip_post +"/#/editor/" + dd[i].id + "' >编辑</a></td>";
                html += "<td><button onclick='del(" + JSON.stringify($.trim(dd[i].id)) + ")'>删除</button></td>";
                html += "<td><button onclick='deploy(" + JSON.stringify($.trim(dd[i].id)) + ")'>发布</button></td>";
                // html += "<td><a href='"+ protocol_ip_post +"/app/rest/models/"+dd[i].id +"/bpmn20'>下载</a></td>";
                html += "<td><a href='"+ protocol_ip_post +"/models/resource/downloadXml/"+dd[i].id+"'>下载</a></td>";
                html += "</tr>";
            }
            $("#tab").append(html)
        }, error: function (jqXHR) {
            console.log("发生错误：" + jqXHR);
            console.log("发生错误：" + jqXHR.status);
        }
    })

    function add() {
        // 模型名称
        var name = $("#name").val();
        // 模型key
        var key = $("#key").val();
        // 描述
        var description = $("#description").val();
        var obj = {
            description: description,
            key: key,
            modelType: 0,
            name: name
        };
        $.ajax({
            type: "POST",
            url: protocol_ip_post + "/models/rest/models",
            // url: protocol_ip_post + "/app/rest/models",
            dataType: "json", //预期服务器返回数据的类型
            data: JSON.stringify(obj),
            contentType: 'application/json;charset=UTF-8',
            success: function (data) {
                console.log("data:", data);
                if(data.success){
                    self.location.href = protocol_ip_post + "/#/editor/" + data.result.id;
                }else {
                    alert(data.result);
                }
            }
        })
        // $.ajax({
        //     type: "POST",
        //     url: protocol_ip_post + "/models/rest/models",
        //     dataType: "json", //预期服务器返回数据的类型
        //     contentType: 'application/json;charset=UTF-8',
        //     data: JSON.stringify(obj),
        //     success: function (data) {
        //         console.log("data:", data);
        //         self.location.href = protocol_ip_post + "/#/editor/" + data.result.id;
        //     }
        // })
    };

    function del(id) {
        $.ajax({
            type: "DELETE",
            url: protocol_ip_post + "/app/rest/models/"+id+"?cascade=false",
            dataType: "json", //预期服务器返回数据的类型
            success: function (data) {
                console.log("data:", data);
                window.location.reload();
            }
        })
    }

    //发布
    function deploy(id) {
        $.ajax({
            type: "POST",
            url: protocol_ip_post + "/models/deploy/"+id,
            dataType: "json", //预期服务器返回数据的类型
            success: function (data) {
                console.log("发布data:", data);
                alert("发布："+data.message)
            }
        })
    }

    //提交申请
    function approve(){
        var obj = {
            // processDefinitionId: $("#processDefinitionId").val(),
            processDefinitionKey: $("#processDefinitionKey").val(),
            businessKey: $("#businessKey").val(),
            businessType: $("#businessType").val(),
            businessName: $("#businessName").val(),
        };
        $.ajax({
            type: "POST",
            url: protocol_ip_post + "/runtime/process-instances",
            dataType: "json", //预期服务器返回数据的类型
            data: JSON.stringify(obj),
            contentType: 'application/json;charset=UTF-8',
            success: function (data) {
                console.log("data:", data);
                alert("启动流程："+data.message);
                window.location.reload();
            }
        })
    }

    //查询正在执行的流程
    function page(){
        $.ajax({
            type: "GET",
            url: protocol_ip_post + "/runtime/process-instances?businessKey="+$("#businessKey1").val()+"&name="+$("#name1").val()+"&size=10&current=1",
            dataType: "json", //预期服务器返回数据的类型
            success: function (data) {
                console.log("data:", data);
                var dd =  data.result.records;
                var html ="";
                for (var i in dd) {
                    html += "<tr>";
                    html += "<td>" + dd[i].processInstanceId + "</td>";
                    html += "<td><img width='30' height='30' src='"+ protocol_ip_post +"/flowable/processDiagram?processId=" + dd[i].processInstanceId + "' /></td>";
                    html += "<td>" + dd[i].name + "</td>";
                    html += "<td>" + dd[i].businessKey + "</td>";
                    html += "<td>" + dd[i].startTime + "</td>";
                    html += "<td>" + dd[i].startUserId + "</td>";
                    html += "<td>" + dd[i].processDefinitionId + "</td>";
                    html += "<td>" + dd[i].processDefinitionKey + "</td>";
                    html += "<td>" + dd[i].processDefinitionName + "</td>";
                    html += "<td>" + (dd[i].isEnded? '流程结束':'流程进行中') + "</td>";
                    // 如果流程实例被挂起，则返回true
                    html += "<td  style='color: #2ca02c;'>" + (dd[i].isSuspended==1? '挂起中':'激活中') + "</td>";
                    var action = (dd[i].isSuspended==1 ? 2:1);//（1挂起，2激活）
                    html += "<td><button onclick='suspended(\"" + dd[i].processInstanceId+"\",\""+action+"\")'>挂起/激活</button></td>";
                    html +="</tr>";
                }
                $("#runId").empty(); //清空
                $("#runId").append(html)
            }
        })
    }

    //挂起/激活
    function suspended(processInstanceId,action) {
        $.ajax({
            type: "GET",
            url: protocol_ip_post + "/runtime/process-instances/"+processInstanceId+"/"+action,
            dataType: "json", //预期服务器返回数据的类型
            success: function (data) {
                console.log("data:", data);
                alert(data.message);
                window.location.reload();
            }
        })
    }

    //查询我的待办
    function taskQuery(){
        var obj = {
            groupIds: JSON.parse($("#group").val()),
            userId: $("#userId").val(),
        };
        $.ajax({
            type: "POST",
            url: protocol_ip_post + "/runtime/tasks",
            dataType: "json", //预期服务器返回数据的类型
            data: JSON.stringify(obj),
            contentType: 'application/json;charset=UTF-8',
            success: function (data) {
                console.log("data:", data);
                var dd =  data.result.records;
                var html ="";
                for (var i in dd) {

                    var url =  protocol_ip_post +"/runtime/tasks/claimTest?taskId="+dd[i].id +"&userId=userId_xxxx";

                    html += "<tr>";
                    html += "<td>" + dd[i].id + "</td>";
                    html += "<td>" + dd[i].processInstanceId + "</td>";
                    html += "<td>" + dd[i].assignee + "</td>";
                    html += "<td>" + dd[i].name + "</td>";
                    html += "<td>" + dd[i].businessKey + "</td>";
                    html += "<td>" + dd[i].businessName + "</td>";
                    html += "<td>" + dd[i].processDefinitionId + "</td>";
                    html += "<td>" + dd[i].processDefinitionKey + "</td>";
                    html += "<td>" + dd[i].processDefinitionName + "</td>";
                    html += "<td>" + JSON.stringify(dd[i].variables) + "</td>";
                    html += "<td>" + dd[i].createTime + "</td>";
                    html += "<td><a href='"+protocol_ip_post+"/index/check?" +
                        "taskId=" + dd[i].id +"&" +
                        "businessName=" + dd[i].businessName +"&" +
                        "assignee=" + dd[i].assignee +"&" +
                        "processInstanceId=" + dd[i].processInstanceId +"&" +
                        "processDefinitionKey=" + dd[i].processDefinitionKey +
                        "'>审批</a>" +
                        "<a href='"+url+"'>签收</a>" +
                        "</td>";
                    html +="</tr>";
                }
                $("#taskId").empty(); //清空
                $("#taskId").append(html)
            }
        })
    }
    //查询我的已办
    function hisQuery(){
        var userId = $("#userId1").val();
        $.ajax({
            type: "GET",
            url: protocol_ip_post + "/runtime/tasks/history?userId="+userId,
            dataType: "json", //预期服务器返回数据的类型
            // data: JSON.stringify(obj),
            contentType: 'application/json;charset=UTF-8',
            success: function (data) {
                console.log("data:", data);
                var dd =  data.result.records;
                var html ="";
                for (var i in dd) {
                    html += "<tr>";
                    html += "<td>" + dd[i].id + "</td>";
                    html += "<td>" + dd[i].businessKey + "</td>";
                    html += "<td>" + dd[i].businessName + "</td>";
                    html += "<td>" + dd[i].processDefinitionKey + "</td>";
                    html += "<td>" + dd[i].processDefinitionName + "</td>";
                    html += "<td>" + dd[i].name + "</td>";
                    html += "<td>" + JSON.stringify(dd[i].variables) + "</td>";
                    html += "<td>" + dd[i].executionId + "</td>";
                    html += "<td>" + dd[i].processInstanceId + "</td>";
                    html += "<td>" + dd[i].processDefinitionId + "</td>";
                    html += "<td>" + dd[i].taskDefinitionId + "</td>";
                    html += "<td>" + dd[i].assignee + "</td>";
                    html += "<td>" + dd[i].owner + "</td>";
                    html += "<td>" + dd[i].createTime + "</td>";
                    html += "<td>" + dd[i].endTime + "</td>";
                    html += "<td>" + dd[i].durationInMillis + "</td>";
                    html +="</tr>";
                }
                $("#hisId").empty(); //清空
                $("#hisId").append(html)
            }
        })
    }



</script>

</body>
</html>